Google Charts API এবং Angular ব্যবহার করে আপনি রিয়েল-টাইম ডেটা ফেচ করতে পারেন এবং সেই ডেটাকে চার্টে প্রদর্শন করতে পারেন। সাধারণত, এই ধরনের ডেটা RESTful API থেকে আসতে পারে, এবং আপনি HTTP Requests এর মাধ্যমে তা Angular অ্যাপে গ্রহণ করবেন। ডেটা আসার পর তা Google Charts-এ প্রদর্শন করা যাবে।

এখানে, আমি Angular এবং Google Charts ব্যবহার করে REST API থেকে ডেটা ফেচ করে Pie Chart এবং Line Chart-এ প্রদর্শনের একটি উদাহরণ দেব।

Step-by-Step: API থেকে Real-Time Data Fetching এবং চার্টে প্রদর্শন

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি Angular প্রজেক্ট তৈরি করুন (যদি ইতিমধ্যে তৈরি থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new realtime-chart
cd realtime-chart

Step 2: HTTP Client Module ইমপোর্ট করা

HTTPClientModule ব্যবহার করার জন্য, প্রথমে এটি app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Import HTTP client module
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule,
    HttpClientModule // HTTPClientModule ইমপোর্ট
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: API থেকে ডেটা ফেচ করা

এখন আমরা একটি RESTful API ব্যবহার করে ডেটা ফেচ করব। এখানে, আমরা একটি সাধারণ API ব্যবহার করব যা র্যান্ডম ডেটা প্রদান করবে।

Example API:

আমরা API ফেচ করার জন্য এখানে Random User API ব্যবহার করতে পারি, বা আপনি আপনার নিজস্ব API ব্যবহার করতে পারেন।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Real-Time Data Fetching for Google Charts';

  // Chart Types
  chartType = 'PieChart'; 
  lineChartType = 'LineChart';

  // Initial data for Pie Chart and Line Chart
  chartData = [['Task', 'Hours per Day'], ['Work', 8], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 8]];
  lineChartData = [
    ['Year', 'Sales', 'Expenses'],
    ['2010', 1000, 400],
    ['2011', 1170, 460],
    ['2012', 660, 1120],
    ['2013', 1030, 540]
  ];

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: '100%',
    height: 400
  };

  lineChartOptions = {
    title: 'Company Performance',
    hAxis: { title: 'Year' },
    vAxis: { title: 'Amount' },
  };

  // Inject HttpClient
  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Fetch real-time data from API when the component is initialized
    this.fetchDataFromAPI();
  }

  // Function to fetch real-time data from API
  fetchDataFromAPI() {
    this.http.get<any>('https://api.example.com/data') // Replace with your actual API endpoint
      .subscribe((response) => {
        // Assuming API response contains 'chartData' and 'lineChartData'
        this.chartData = response.chartData;  // Update Pie Chart data
        this.lineChartData = response.lineChartData; // Update Line Chart data
      }, (error) => {
        console.error('Error fetching data:', error);
      });
  }
}

Step 4: HTML ফাইল তৈরি করা

এখন, HTML ফাইলে চার্ট রেন্ডার করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে একটি Pie Chart এবং একটি Line Chart প্রদর্শিত হবে।

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Pie Chart -->
<div class="chart-container">
  <h2>Pie Chart</h2>
  <google-chart 
    [type]="chartType" 
    [data]="chartData" 
    [options]="chartOptions">
  </google-chart>
</div>

<!-- Line Chart -->
<div class="chart-container">
  <h2>Line Chart</h2>
  <google-chart 
    [type]="lineChartType" 
    [data]="lineChartData" 
    [options]="lineChartOptions">
  </google-chart>
</div>

Step 5: CSS Styling

আপনার চার্টগুলিকে সুন্দরভাবে প্রদর্শন করার জন্য কিছু CSS স্টাইল ব্যবহার করুন।

app.component.css ফাইল:

.chart-container {
  margin-bottom: 30px;
  text-align: center;
}

google-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* Ensure charts are responsive */
}

Step 6: API থেকে ডেটা পাওয়ার পর চার্ট আপডেট

উপরে fetchDataFromAPI ফাংশনে দেখানো হয়েছে কিভাবে HTTP GET Request ব্যবহার করে API থেকে ডেটা ফেচ করা হয়। ডেটা পাওয়ার পর chartData এবং lineChartData আপডেট করা হয়েছে, যা স্বয়ংক্রিয়ভাবে চার্টে প্রতিফলিত হবে।

সারাংশ

এই উদাহরণে, আমরা দেখলাম কিভাবে Angular এবং Google Charts API ব্যবহার করে real-time data API থেকে ফেচ করা হয় এবং সেই ডেটা Pie Chart এবং Line Chart-এ প্রদর্শিত হয়। Angular-এর HttpClient মডিউল ব্যবহার করে API থেকে ডেটা গ্রহণ এবং Google Charts API-তে সেটি ব্যবহার করা সহজ। এই পদ্ধতিটি আপনার অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ বানায়, যেখানে ডেটা সঠিকভাবে এবং রিয়েল-টাইমে প্রদর্শিত হয়।